<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>商城首页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/bottom.css"/>
		<link rel="stylesheet" type="text/css" href="css/index_center.css"/>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="header-top">
					<!-- 上部分 -->
					<div id="logo">
						<a href="#"></a>
					</div>
					<div id="car">
						<ul>
							<li><a href="" class="pic"></a></li>
							<li><a href="" class="text">购物车</a></li>
							<li><a href="" class="pic pic2"></a></li>
							<li><a href="" class="text">加入收藏</a></li>
							<li><a href="" class="pic pic3"></a></li>
							<li><a href="" class="text">帮助中心</a></li>
							<li><a href="" class="pic pic4"></a></li>
							<li><a href="" class="text">设为首页</a></li>
							<li><a href="" class="pic pic5">登录</a></li>
							<li><a href="" class="pic pic5">注册</a></li>
						</ul>
					</div>
					<div id="welcome">
						<span>欢迎访问</span>
						<span id="time">2020-09-14 14:40:55</span>
					</div>
				</div>
				<div id="header-nav">
					<!-- 下部分 -->
					<ul id="nav">
						<li><a href="#">首　　页</a></li>
						<li><a href="#">家用电器</a></li>
						<li><a href="#">手机数码</a></li>
						<li><a href="#">日用百货</a></li>
						<li><a href="#">书　　籍</a></li>
						<li><a href="#">帮助中心</a></li>
						<li><a href="#">免费开店</a></li>
						<li><a href="#">全球资讯</a></li>
					</ul>
					<ul id="soso">
						<li><input type="text" id="content" value="" /></li>
						<li><input type="button" onclick="soso()" id="" value="soso" /></li>
					</ul>
				</div>
			</div>
			
			<!--中间部分-->
			<div id="center">
				
				<div id="center-left">
					
					<p class="space"></p>
					
					<div id="content">
						<h3><a href="#">家用电器</a></h3>
						<ul>
							<li><a href="#">大家电</a></li>
							<li><a href="#">洗衣机</a></li>
							<li><a href="#">神兽羊驼</a></li>
							<li><a href="#">电热水器</a></li>
							<li><a href="#">家庭音响</a></li>
							<li><a href="#">热水器</a></li>
							<li><a href="#">空调冰箱</a></li>
							<li><a href="#">冷柜</a></li>
							<li><a href="#">DVD</a></li>
							<li><a href="#">电视零件</a></li>
							<li><a href="#">点燃气灶</a></li>
							<li><a href="#">家电下乡</a></li>
							<li><a href="#">家电服务</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">摄像机</a></li>
						</ul>
					</div>
					
					
					<div id="content">
						<h3><a href="#">家用电器</a></h3>
						<ul>
							<li><a href="#">大家电</a></li>
							<li><a href="#">洗衣机</a></li>
							<li><a href="#">平板电视</a></li>
							<li><a href="#">电热水器</a></li>
							<li><a href="#">家庭音响</a></li>
							<li><a href="#">热水器</a></li>
							<li><a href="#">空调冰箱</a></li>
							<li><a href="#">冷柜</a></li>
							<li><a href="#">DVD</a></li>
							<li><a href="#">电视零件</a></li>
							<li><a href="#">点燃气灶</a></li>
							<li><a href="#">家电下乡</a></li>
							<li><a href="#">家电服务</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">摄像机</a></li>
						</ul>
					</div>
					
					
					<div id="content">
						<h3><a href="#">家用电器</a></h3>
						<ul>
							<li><a href="#">大家电</a></li>
							<li><a href="#">洗衣机</a></li>
							<li><a href="#">平板电视</a></li>
							<li><a href="#">电热水器</a></li>
							<li><a href="#">家庭音响</a></li>
							<li><a href="#">热水器</a></li>
							<li><a href="#">空调冰箱</a></li>
							<li><a href="#">冷柜</a></li>
							<li><a href="#">DVD</a></li>
							<li><a href="#">电视零件</a></li>
							<li><a href="#">点燃气灶</a></li>
							<li><a href="#">家电下乡</a></li>
							<li><a href="#">家电服务</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">摄像机</a></li>
						</ul>
					</div>
					
					
					<div id="content">
						<h3><a href="#">家用电器</a></h3>
						<ul>
							<li><a href="#">大家电</a></li>
							<li><a href="#">洗衣机</a></li>
							<li><a href="#">平板电视</a></li>
							<li><a href="#">电热水器</a></li>
							<li><a href="#">家庭音响</a></li>
							<li><a href="#">热水器</a></li>
							<li><a href="#">空调冰箱</a></li>
							<li><a href="#">冷柜</a></li>
							<li><a href="#">DVD</a></li>
							<li><a href="#">电视零件</a></li>
							<li><a href="#">点燃气灶</a></li>
							<li><a href="#">家电下乡</a></li>
							<li><a href="#">家电服务</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">摄像机</a></li>
						</ul>
					</div>
					
					
				</div>
				
				<div id="center-mid">
					<div id="center-mid-ad">
					<ul id="imgs">
						<li><a href=""><img src="img/ad-01.jpg" alt=""></a></li>
						<li><a href=""><img src="img/ad-02.jpg" alt=""></a></li>
						<li><a href=""><img src="img/ad-03.jpg" alt=""></a></li>
						<li><a href=""><img src="img/ad-04.jpg" alt=""></a></li>
					</ul>
					
					<ul id="nums">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					
					</div>
					<!--疯狂抢购的html代码结构 设置外层容器的宽高 添加背景图-->
					<!--容器边距-->
					<!--编写抢购HTML-->
					<!--css样式-->
					<!--数据不是写死的
					建立一张表用来存贮广告图片 表的名称adimgs
					插入模拟数据 数据中的img_url要和后台程序保存的图片路径一致
					
					INSERT into adimg(img_url,img_desc,img_page,img_order)
					values('/adimg/ad-01.jpg','数据分析','http:http://www.4399.com/',0);
					INSERT into adimg(img_url,img_desc,img_page,img_order)
					values('/adimg/img1.jpg','百度搜索','http:http://www.baidu.com/',1);
					INSERT into adimg(img_url,img_desc,img_page,img_order)
					values('/adimg/img2.jpg','数据的处理','http:http://www.4399.com/',2);
					INSERT into adimg(img_url,img_desc,img_page,img_order)
					values('/adimg/img3.jpg','可视化报表','http:http://www.4399.com/',3);
					INSERT into adimg(img_url,img_desc,img_page,img_order)
					values('/adimg/img4.jpg','数据期望','http:http://www.7K7K.com/',10);
					
					select * from adimg ORDER BY img_order ASC LIMIT 0,4
					
					编写后台程序 提供一个实体类Adimg和数据库对应起来
					创建一个数据库访问的类 AdimgDao 查询广告图片
					提供一个serlvet可以访问数据库的数据 也可以给前段提供获取数据
					以json格式返回给浏览器 
					在pom文件
					写好后 访问后台服务 访问http：//127.0.0.1:8080/AdimgServelt
					
					开发前端部分
					在首页上引入jquery
					编写页面加载事件
					发送异步请求事件
					不同的服务器存在跨域问题
					-->
					<div id="creazyBuy">
					<ul>
						<li><a href=""><img src="img/promote-1.jpg" alt=""></a></li>
						<li><a href="">写程序</a></li>
					</ul>
					
					<ul>
						<li><a href=""><img src="img/promote-2.jpg" alt=""></a></li>
						<li><a href="">写程序让我很快乐</a></li>
					</ul>
					
					<ul>
						<li><a href=""><img src="img/promote-3.jpg" alt=""></a></li>
						<li><a href="">写程序咕咕咕咕咕咕咕咕咕咕咕咕咕</a></li>
					</ul>
					
					<ul>
						<li><a href=""><img src="img/promote-1.jpg" alt=""></a></li>
						<li><a href="">啦啦啦啦阿拉啦啦啦啦啦啦啦啦</a></li>
					</ul>
					
					<ul>
						<li><a href=""><img src="img/promote-1.jpg" alt=""></a></li>
						<li><a href="">写程序</a></li>
					</ul>
					
					<ul>
						<li><a href=""><img src="img/promote-2.jpg" alt=""></a></li>
						<li><a href="">写程序让我很快</a></li>
					</ul>
					
					<ul>
						<li><a href=""><img src="img/promote-3.jpg" alt=""></a></li>
						<li><a href="">写程序咕咕咕咕咕咕咕</a></li>
					</ul>
					
					<ul>
						<li><a href=""><img src="img/promote-1.jpg" alt=""></a></li>
						<li><a href="">啦啦啦啦阿拉啦啦啦啦啦</a></li>
					</ul>
					
					<ul>
						<li><a href=""><img src="img/promote-3.jpg" alt=""></a></li>
						<li><a href="">写程序咕咕咕咕咕咕咕</a></li>
					</ul>
					
					</div>
				</div>
				
				<!--
				1.划分区域 设置好宽高和间距
				2.设置顶部div的背景和内部的html
				3.中间部分设置背景 边距
				4.编写代码结构 上下两部分
				-->
				<div id="center-right">
					<div id="center-right_top">
						<div id="cover">
							<ul>
								<li><a href="#"><img src="img/1.png" alt=""></a></li>
								<li><a href="#">程序员是个好工作</a></li>
								<li><a href="#">程序员是个好工作</a></li>
								<li><a href="#">程序员是个好工作</a></li>
								<li><a href="#">程序员是个好工作</a></li>
							</ul>
						</div>
					</div>
					
					<div id="center-right_mid">
						
						<ul>
							<li><a href="#"><img src="img/show1.jpg" alt=""></a></li>
							<li><a href="#">前端专用电脑</a></li>
						</ul>
						
						<ul>
							<li><a href="#"><img src="img/show2.jpg" alt=""></a></li>
							<li><a href="#">前端专用电脑</a></li>
						</ul>
						
						<ul>
							<li><a href="#"><img src="img/show3.jpg" alt=""></a></li>
							<li><a href="#">前端专用电脑</a></li>
						</ul>
						
						<ul>
							<li><a href="#"><img src="img/show4.jpg" alt=""></a></li>
							<li><a href="#">前端专用电脑</a></li>
						</ul>
						
						
					</div>
					
					<div id="center-right_bottom">
						
						<div id="center-right_bottom_nav" class="computer">
							<ul>
								<li onclick="showTab('computer','phone')"></li>
								<li onclick="showTab('phone','computer')"></li>
							</ul>
						</div>
						
						<div id="center-right_bottom_content">
							<div id="computer" class="tab_content" style="display: none;">
								<p>品牌:　<select name="">
									<option value ="">联想</option>
									<option value ="">小米</option>
									<option value ="">华为</option>
								</select></p>
								
								<p>尺寸:　<select name="">
									<option value ="">13英寸</option>
									<option value ="">14英寸</option>
									<option value ="">15英寸</option>
								</select></p>
								
								<p>价格:　<select name="">
									<option value ="">4000以下</option>
									<option value ="">4000-5000</option>
									<option value ="">5000以上</option>
								</select></p>
								
								<p></p>
								
							</div>
							
							
							<div id="phone" class="tab_content">
								<p>运营商:　<select name="">
									<option value ="">移动</option>
									<option value ="">联通</option>
									<option value ="">电信</option>
								</select></p>
								
								<p>面　值:　<select name="">
									<option value ="">50</option>
									<option value ="">100</option>
									<option value ="">500</option>
								</select></p>
								
								<p>地　区:　<select name="">
									<option value ="">广东</option>
									<option value ="">广西</option>
									<option value ="">河南</option>
								</select></p>
								
								<p></p>
								
							</div>
							
							
							
						</div>
					</div>
					
				</div>
				
			</div>
			
			
			
			
			
			<div id="bottom_index">
				
				<ul id="links">
					<!--<li><a href="#">友情链接:</a></li>
					<li><a href="#">&nbsp;&nbsp;网易&nbsp;&nbsp;</a></li>
					<li><a href="#">|&nbsp;&nbsp;百度&nbsp;&nbsp;</a></li>
					<li><a href="#">|&nbsp;&nbsp;GOOGLE&nbsp;&nbsp;</a></li>
					<li><a href="#">|&nbsp;&nbsp;京东&nbsp;&nbsp;</a></li>
					<li><a href="#">|&nbsp;&nbsp;淘宝&nbsp;&nbsp;</a></li>
					<li><a href="#">&nbsp;&nbsp;网易&nbsp;&nbsp;</a></li>
					<li><a href="#">|&nbsp;&nbsp;百度&nbsp;&nbsp;</a></li>
					<li><a href="#">|&nbsp;&nbsp;GOOGLE&nbsp;&nbsp;</a></li>
					<li><a href="#">|&nbsp;&nbsp;京东&nbsp;&nbsp;</a></li>
					<li><a href="#">|&nbsp;&nbsp;淘宝&nbsp;&nbsp;</a></li>-->
				
				</ul>
				
				
				<hr >
				<div >
					<p>版权:&copy;&copy;&copy;xxxxxxxxxxxxxxxxxxxxxx</p>
					<p>客服电话:123456789000</p>
					<p>京公网安备11000002000001号 京ICP证030173号</p>
					<p><img src="img/img1.gif"><img src="img/img2.gif"><img src="img/img3.gif"><img src="img/img4.gif"></p>
				</div>
			</div>
			
			
			
			<div id="lianjie">
				<a href="#">友情链接:</a>
			</div>
			
			<!--位置是绝对定位 所以广告写在body中 不用写在container中-->
			<div id="ad_left">
				<a href="#"><img src="img/list1.jpg" ></a>
				<img src="img/close.gif" onclick="hiddenAd('ad_left')">
			</div>
			
			<div id="ad_right">
				<a href="#"><img src="img/list2.jpg" ></a>
				<img src="img/close.gif" onclick="hiddenAd('ad_right')">
			</div>
			
			
		</div>
	</body>
	<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body>
</html>
